<template>
  <div class="warpper-box">
    <a-form layout="inline" style="padding-left: 34px;">
      <a-form-item label="月份">
        <a-month-picker valueFormat="YYYY-MM" v-model="params.yearMonth" placeholder="选择月份"></a-month-picker>
      </a-form-item>
      <a-form-item>
        <a-button type='primary' @click="onSearch">查询</a-button>
      </a-form-item>
    </a-form>
    <!-- 员工统计图表 -->
    <div style="padding: 20px 150px 0 150px;">
      <a-tabs type="card" v-model="staffType" @change="staffChange">
        <a-tab-pane key="1" tab="平台公司">
        </a-tab-pane>
        <a-tab-pane key="2" tab="客户">
        </a-tab-pane>
      </a-tabs>
      <div id="staffChart" style="width: 100%;height: 560px;"></div>
    </div>
    <!-- 统计结算金额图表 -->
    <div style="padding: 20px 150px 0 150px;">
      <div id="allSettlementChart" style="width: 100%;height: 560px;"></div>
    </div>
    <a-row type="flex" justify="space-around" style="padding: 20px 150px 0;">
      <a-col :span="11">
        <!-- 结算金额图表 -->
        <a-tabs type="card" v-model="settlementType" @change="settlementChange">
          <a-tab-pane key="1" tab="业务类型">
          </a-tab-pane>
          <a-tab-pane key="2" tab="平台公司">
          </a-tab-pane>
        </a-tabs>
        <div id="settlementChart" style="width: 100%;height: 560px;"></div>
      </a-col>
      <a-col :span="11">
        <!-- 服务费图表 -->
        <a-tabs type="card" v-model="serviceType" @change="serviceChange">
          <a-tab-pane key="1" tab="业务类型">
          </a-tab-pane>
          <a-tab-pane key="2" tab="平台公司">
          </a-tab-pane>
        </a-tabs>
        <div id="serviceChart" style="width: 100%;height: 560px;"></div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {
  getParkEnterpriseStaffDataView,
  getEnterpriseStaffDataView,
  getEnterpriseBizTypeAmountDataView,
  getBizTypeOrderAmountDataView,
  getEnterpriseOrderAmountDataView,
  getBizTypeServiceAmountDataView,
  getEnterpriseServiceAmountAmountDataView
} from "@/api/human/report"
var nowDate = new Date(); // 当前时间
export default {
  name: "compositeDetailEcharts",
  data() {
    return {
      params: {
        yearMonth: nowDate.getFullYear() + "-" + ((nowDate.getMonth() + 1) < 10 ? '0' + (nowDate.getMonth() + 1) : (nowDate.getMonth() + 1)),
      },

      statisticsInfo: {}, // 统计数据

      staffType: '1', // 员工统计类型
      staffList: [], // 员工统计列表
      allSettlementList: {}, // 统计结算金额列表
      settlementType: '1', // 结算金额类型
      settlementList: [], // 结算金额统计列表
      serviceType: '1', // 结算金额类型
      serviceList: [], // 结算金额统计列表
    };
  },
  activated() {
    this.getData();
  },
  methods: {
    // 获取月度明细统计数据
    async getData() {
      this.staffEchart();
      this.allSettlementEchart();
      this.settlementEchart();
      this.serviceEchart();
    },
    // 初始化员工统计
    staffChange() {
      this.staffEchart();
    },
    async staffEchart() {
      if (this.staffType == '1') {
        const { code, data } = await getParkEnterpriseStaffDataView(this.params);
        if (code === '1') {
          this.staffList = data;
          this.initStaffEchart();
        }
      } else {
        const { code, data } = await getEnterpriseStaffDataView(this.params);
        if (code === '1') {
          this.staffList = data;
          this.initStaffEchart();
        }
      }
    },
    // 员工数量
    initStaffEchart() {
      const myChart = echarts.init(document.getElementById("staffChart"));
      let color = [
        "#0090FF",
        "#36CE9E",
        "#FFC005",
        "#FF515A",
        "#8B5CFF",
        "#00CA69"
      ];
      let echartData = this.staffList

      let xAxisData = echartData.map(v => v.name);
      let yAxisData1 = echartData.map(v => v.cooperationCount);
      let yAxisData2 = echartData.map(v => v.entryCount);
      let yAxisData3 = echartData.map(v => v.newCont);
      let yAxisData4 = echartData.map(v => v.leaveCount);
      const hexToRgba = (hex, opacity) => {
        let rgbaColor = "";
        let reg = /^#[\da-f]{6}$/i;
        if (reg.test(hex)) {
          rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
            "0x" + hex.slice(3, 5)
          )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
        }
        return rgbaColor;
      }

      let option = {
        backgroundColor: "#fff",
        color: color,
        legend: {
          right: 40,
          top: 53,
          textStyle: {
            color: "#9FACBC"
          },
        },
        title: {
          text: `{a|员工统计}`,
          textStyle: {
            rich: {
              a: {
                fontSize: 16,
                fontWeight: 600,
              },
            },
          },
          top: '0%',
          left: 'center',
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            let html = '';
            params.forEach(v => {
              html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>${v.seriesName}
                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
                人`;
            })
            return html
          },
          extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              color: '#ffffff',
              shadowColor: 'rgba(225,225,225,1)',
              shadowBlur: 5
            }
          }
        },
        grid: {
          top: 100,
          left: 5,
          right: 5,
          containLabel: true
        },
        dataZoom: [{
          "show": true,
          "height": 8,
          "xAxisIndex": [
            0
          ],
          bottom: 30,
          startValue: 0,
          endValue: 10,
          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
          handleSize: '180%',
          handleStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#fff',
            },
            {
              offset: 1,
              color: '#F0F5FA',
            },
            ]),
            borderColor: '#D1DCED'
          },
          textStyle: {
            color: "#333",
            fontSize: 14,
            zlevel: 10
          },
          borderColor: 'RGBA(221, 233, 242, 1)',
          backgroundColor: 'RGBA(221, 233, 242, 1)'
        }, {
          "type": "inside",
          "show": true,
          "height": 5,
        }],
        xAxis: [{
          type: "category",
          boundaryGap: true,
          axisLabel: {
            rotate: -15,
            formatter: '{value}',
            textStyle: {
              color: "#9FACBC"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#293755"
            }
          },
          data: xAxisData
        }],
        yAxis: [{
          type: "value",
          name: '单位：人',
          axisLabel: {
            textStyle: {
              color: "#9FACBC"
            }
          },
          nameTextStyle: {
            color: "#9FACBC",
            fontSize: 12,
            lineHeight: 40
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "rgba(0,0,0,.2)"
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        }],
        series: [{
          name: "合作人数",
          type: "line",
          smooth: true,
          showSymbol: false,
          symbolSize: 8,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color[0],
              shadowBlur: 3,
              shadowColor: hexToRgba(color[0], 0.5),
              shadowOffsetY: 8
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [{
                  offset: 0,
                  color: hexToRgba(color[0], 0.2)
                },
                {
                  offset: 1,
                  color: hexToRgba(color[0], 0)
                }
                ],
                false
              ),
              shadowColor: hexToRgba(color[0], 0.1),
              shadowBlur: 10
            }
          },
          data: yAxisData1
        }, {
          name: "在职人数",
          type: "line",
          smooth: true,
          showSymbol: false,
          symbolSize: 8,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color[1],
              shadowBlur: 3,
              shadowColor: hexToRgba(color[1], 0.5),
              shadowOffsetY: 8
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [{
                  offset: 0,
                  color: hexToRgba(color[1], 0.2)
                },
                {
                  offset: 1,
                  color: hexToRgba(color[1], 0)
                }
                ],
                false
              ),
              shadowColor: hexToRgba(color[1], 0.1),
              shadowBlur: 10
            }
          },
          data: yAxisData2
        }, {
          name: "新入职",
          type: "line",
          smooth: true,
          showSymbol: false,
          symbolSize: 8,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color[2],
              shadowBlur: 3,
              shadowColor: hexToRgba(color[2], 0.5),
              shadowOffsetY: 8
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [{
                  offset: 0,
                  color: hexToRgba(color[2], 0.2)
                },
                {
                  offset: 1,
                  color: hexToRgba(color[2], 0)
                }
                ],
                false
              ),
              shadowColor: hexToRgba(color[2], 0.1),
              shadowBlur: 10
            }
          },
          data: yAxisData3
        }, {
          name: "离职人数",
          type: "line",
          smooth: true,
          showSymbol: false,
          symbolSize: 8,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color[2],
              shadowBlur: 3,
              shadowColor: hexToRgba(color[3], 0.5),
              shadowOffsetY: 8
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [{
                  offset: 0,
                  color: hexToRgba(color[3], 0.2)
                },
                {
                  offset: 1,
                  color: hexToRgba(color[3], 0)
                }
                ],
                false
              ),
              shadowColor: hexToRgba(color[3], 0.1),
              shadowBlur: 10
            }
          },
          data: yAxisData4
        }]
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // 初始化统计结算金额
    async allSettlementEchart() {
      const { code, data } = await getEnterpriseBizTypeAmountDataView(this.params);
      if (code === '1') {
        this.allSettlementList = data;
        this.initAllSettlementEchart();
      }
    },
    // 统计结算金额
    initAllSettlementEchart() {
      const myChart = echarts.init(document.getElementById("allSettlementChart"));
      let arr = [];
      let list = [];
      let series = [];
      let legend = [];
      let fontSize = 16;
      let barWidth = 26;
      let barGap = 0;
      let maxList = [];
      let max = 460; //背景最大值取y轴刻度线（最后注释部分）
      let colorStartList = ['transparent', 'transparent', 'transparent', 'transparent', 'transparent', 'transparent', 'transparent', 'transparent'];
      let colorLeftList = ['#000', '#000', '#000', '#000', '#000', '#000', '#000', '#000'];
      let colorTopList = ['#1E7EFF', '#FFA75A', '#6ACC29', '#9833FF', '#54D9FF', '#987EFF', '#ffcb3d', '#00bca3'];
      let colorEndList = ['#4084EE', '#FF8D28', '#6ACC29', '#9833FF', '#54D9FF', '#987EFF', '#ffcb3d', '#00bca3'];
      let chartObj = this.allSettlementList;
      function colorRgba(str, alpha) {
        let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
        var sColor = str.toLowerCase();
        if (sColor == 'transparent') {
          return 'transparent';
        }
        if (sColor && reg.test(sColor)) {
          if (sColor.length === 4) {
            var sColorNew = '#';
            for (let i = 1; i < 4; i += 1) {
              sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
            }
            sColor = sColorNew;
          }
          //处理六位的颜色值
          var sColorChange = [];
          for (let i = 1; i < 7; i += 2) {
            sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)));
          }
          return 'rgba(' + sColorChange.join(',') + ',' + alpha + ')';
        } else {
          return sColor;
        }
      }
      if (chartObj.series && chartObj.series.length) {
        chartObj.series.forEach((ele, i) => {
          arr = arr.concat(ele.data);
        });
        maxList = chartObj.series[0].data.map(() => {
          return max;
        });
        list = chartObj.series[0].data.map((item, index) => {
          return 1;
        });
        chartObj.series.forEach((item, index) => {
          legend.push({
            name: item.name,
            itemStyle: {
              color: colorEndList[index % colorEndList.length],
            },
          });
          //底部切片
          series.push({
            data: list,
            color: colorStartList[index % colorStartList.length],
            type: 'pictorialBar',
            tooltip: {
              show: false,
            },
            barMaxWidth: fontSize * 3,
            symbol: 'diamond',
            symbolOffset: [
              (-0.5 * (chartObj.series.length - 1) +
                index +
                -0.5 * barGap * 0.01 * (chartObj.series.length - 1) +
                barGap * 0.01 * index) *
              barWidth,
              '50%',
            ],
            symbolSize: [barWidth, barWidth * 0.5],
          });

          //实际数据顶部切片
          series.push({
            data: item.data,
            type: 'pictorialBar',
            tooltip: {
              show: false,
            },
            barMaxWidth: fontSize * 3,
            color: colorTopList[index],
            symbolPosition: 'end',
            symbol: 'diamond',
            symbolOffset: [
              (-0.5 * (chartObj.series.length - 1) +
                index +
                -0.5 * barGap * 0.01 * (chartObj.series.length - 1) +
                barGap * 0.01 * index) *
              barWidth,
              '-50%',
            ],
            symbolSize: [barWidth, barWidth * 0.4],
            zlevel: 2,
          });
          //实际数据侧边切片
          series.push({
            data: item.data,
            type: 'pictorialBar',
            tooltip: {
              show: false,
            },
            barMaxWidth: fontSize * 3,
            color: {
              x: 0,
              y: 1,
              x2: 0,
              y2: 0,
              type: 'linear',
              global: false,
              colorStops: [
                {
                  offset: 0,
                  color: 'transparent',
                },
                {
                  offset: 0.2,
                  color: colorRgba(colorLeftList[index % colorLeftList.length], 0.2),
                },
                {
                  offset: 1,
                  color: colorRgba(colorLeftList[index % colorLeftList.length], 0.3),
                },
              ],
            },
            symbolPosition: 'end',
            symbol: 'rect',
            symbolSize: [barWidth / 2, '100%'],
            symbolOffset: [
              (-0.5 * (chartObj.series.length - 1) +
                index +
                -0.5 * barGap * 0.01 * (chartObj.series.length - 1) +
                barGap * 0.01 * index -
                0.25) *
              barWidth,
              0,
            ],
            zlevel: 1,
          });
          //柱子
          series.push({
            data: item.data,
            type: 'bar',
            name: item.name,
            barGap: barGap + '%',
            barWidth: barWidth,
            barMaxWidth: fontSize * 3,
            label: {
              show: false,
              position: 'top',
              distance: fontSize * 0.3,
              textStyle: {
                color: colorEndList[index % colorEndList.length],
                fontSize: fontSize,
              },
              // formatter: function (a, b) {
              //     return a.value==0?'':a.value;
              // },
            },
            backgroundStyle: {
              color: {
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                type: 'linear',
                global: false,
                colorStops: [
                  {
                    offset: 0,
                    color: colorStartList[index % colorStartList.length],
                  },
                  {
                    offset: 0.2,
                    color: colorRgba(colorEndList[index % colorEndList.length], 0.2),
                  },
                  {
                    offset: 1,
                    color: colorRgba(colorEndList[index % colorEndList.length], 1),
                  },
                ],
              },
              opacity: 0.1,
            },
            itemStyle: {
              color: {
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                type: 'linear',
                global: false,
                colorStops: [
                  {
                    offset: 0,
                    color: colorStartList[index % colorStartList.length],
                  },
                  {
                    offset: 0.2,
                    color: colorRgba(colorEndList[index % colorEndList.length], .2),
                  },
                  {
                    offset: 1,
                    color: colorRgba(colorEndList[index % colorEndList.length], 1),
                  },
                ],
              },
            },
          });
        });
      }
      let option = {
        // backgroundColor: "#061326",
        title: {
          text: '统计结算金额',
          top: 10,
          left: 'center',
          textStyle: {
            fontSize: 16,
            fontWeight: 600
          },
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          backgroundColor: 'rgba(116,176,222,1)',
          extraCssText: 'box-shadow: 0 0 8px rgba(0, 128, 255, 0.27) inset;',
          borderWidth: 0,
          confine: false,
          appendToBody: true,
          formatter: (params) => {
            let result = "<div style='margin-bottom:5px;'>" + params[0].name + '</div>';
            params.forEach((item, index) => {
              var dotHtml = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:${fontSize}px;height:${fontSize}px;background:${colorEndList[index]}"></span>`;
              result +=
                "<div style='display:flex;align-items:center;margin-bottom:5px;'>" +
                dotHtml +
                item.seriesName +
                (item.seriesName ? "<span style='display:inline-block;margin-right:6px;'></span>" : '') +
                item.data +
                '</div>';
            });
            return result;
          },
          //轴触发提示才有效
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              color: 'rgba(35,49,77,0.01)',
            },
          },
          textStyle: {
            color: '#fff',
            fontSize: fontSize,
          },
        },
        grid: {
          top: 100,
          left: 5,
          right: 5,
          containLabel: true
        },
        dataZoom: [{
          "show": true,
          "height": 8,
          "xAxisIndex": [
            0
          ],
          bottom: 30,
          startValue: 0,
          endValue: 5,
          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
          handleSize: '180%',
          handleStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#fff',
            },
            {
              offset: 1,
              color: '#F0F5FA',
            },
            ]),
            borderColor: '#D1DCED'
          },
          textStyle: {
            color: "#333",
            fontSize: 14,
            zlevel: 10
          },
          borderColor: 'RGBA(221, 233, 242, 1)',
          backgroundColor: 'RGBA(221, 233, 242, 1)'
        }, {
          "type": "inside",
          "show": true,
          "height": 5,
        }],
        legend: {
          show: true,
          data: legend,
          selectedMode: false, //图例是否可以点击
          type: 'scroll',
          icon: 'circle',
          top: 40,
          itemWidth: fontSize,
          itemHeight: fontSize,
          textStyle: {
            color: '#C3E3F9',
            fontSize: fontSize,
          },
        },
        xAxis: {
          data: chartObj.chartList,
          type: 'category',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#2B72A1',
            },
          },
          boundaryGap: true,
          axisLabel: {
            rotate: -15,
            formatter: '{value}',
            textStyle: {
              color: "#9FACBC"
            }
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          interval: 0,
        },
        yAxis: [
          {
            type: 'value',
            name: '',
            nameGap: fontSize * 1.5,
            nameTextStyle: {
              align: 'center',
              fontSize: fontSize,
              color: '#2869A9',
            },
            splitNumber: 4,
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255,255,255,0.1)',
              },
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              margin: 10,
              fontSize: fontSize,
              color: '#2869A9',
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: '#2869A9',
              },
            },
          },
        ],
        series: series,
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // 初始化结算金额
    settlementChange() {
      this.settlementEchart();
    },
    async settlementEchart() {
      if (this.settlementType == '1') {
        const { code, data } = await getBizTypeOrderAmountDataView(this.params);
        if (code === '1') {
          data.forEach(item => {
            item.value = item.amount;
          })
          this.settlementList = data;
          this.initSettlementEchart();
        }
      } else {
        const { code, data } = await getEnterpriseOrderAmountDataView(this.params);
        if (code === '1') {
          data.forEach(item => {
            item.value = item.amount;
          })
          this.settlementList = data;
          this.initSettlementEchart();
        }
      }
    },
    // 结算金额
    initSettlementEchart() {
      const myChart = echarts.init(document.getElementById("settlementChart"));
      let colorList = ['rgb(21, 70, 187)', 'rgb(12, 139, 229)', 'rgb(211, 120, 126)', 'rgb(225, 168, 37)', 'rgb(231, 201, 27)', 'rgb(60, 185, 180)', 'rgb(17, 187, 215)', 'rgb(175, 155, 215)'];
      let data = this.settlementList;
      console.log(data);
      // data排序
      data = data.sort((a, b) => {
        return a.value - b.value;
      });
      // data样式
      data.forEach((item, index) => {
        const transparentColor = colorList[index % colorList.length].replace('rgb', 'rgba').replace(')', ', 0.5)');
        item.itemStyle = {
          color: transparentColor,
          borderColor: colorList[index % colorList.length],
        };
      });
      let option = {
        backgroundColor: '#fff',
        grid: {
          top: "0",
          left: "0",
          right: "0",
          bottom: "0",
        },
        title: {
          text: '结算金额',
          top: 10,
          left: 'center',
          textStyle: {
            fontSize: 16,
            fontWeight: 600
          },
        },
        series: [
          {
            type: "pie",
            color: '#8E99B3',
            silent: true,
            clockwise: true,
            radius: ["0%", "10%"],
            center: ["50%", "50%"],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: [0],
          },
          {
            type: "pie",
            color: '#8E99B3',
            silent: true,
            clockwise: true,
            radius: ["15%", "16%"],
            center: ["50%", "50%"],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: [0],
          },
          {
            stack: "a",
            type: "pie",
            radius: ["30%", "68%"],
            center: ["50%", "50%"],
            silent: true, // 鼠标悬浮效果
            clockwise: true, // 鼠标悬浮效果
            roseType: "area",
            zlevel: 10,
            label: {
              show: true,
              color: '#fff',
              fontSize: 15,
              lineHeight: 20,
              formatter: '{percent|{c}元 -- }\n{percent|{b}}',
              overflow: 'break',
              rich: {
                percent: {
                  fontSize: 15,
                  color: '#0090FF',
                },
              }
            },
            itemStyle: {
              borderWidth: 3,
            },
            data: data
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // 初始化服务费
    serviceChange() {
      this.serviceEchart();
    },
    async serviceEchart() {
      if (this.serviceType == '1') {
        const { code, data } = await getBizTypeServiceAmountDataView(this.params);
        if (code === '1') {
          data.forEach(item => {
            item.value = item.amount;
          })
          this.serviceList = data;
          this.initServiceEchart();
        }
      } else {
        const { code, data } = await getEnterpriseServiceAmountAmountDataView(this.params);
        if (code === '1') {
          data.forEach(item => {
            item.value = item.amount;
          })
          this.serviceList = data;
          this.initServiceEchart();
        }
      }
    },
    // 服务费
    initServiceEchart() {
      const myChart = echarts.init(document.getElementById("serviceChart"));
      let colorList = ['rgb(21, 70, 187)', 'rgb(12, 139, 229)', 'rgb(211, 120, 126)', 'rgb(225, 168, 37)', 'rgb(231, 201, 27)', 'rgb(60, 185, 180)', 'rgb(17, 187, 215)', 'rgb(175, 155, 215)'];
      let data = this.serviceList;
      // data排序
      data = data.sort((a, b) => {
        return a.value - b.value;
      });
      // data样式
      data.forEach((item, index) => {
        const transparentColor = colorList[index % colorList.length].replace('rgb', 'rgba').replace(')', ', 0.5)');
        item.itemStyle = {
          color: transparentColor,
          borderColor: colorList[index % colorList.length],
        };
      });
      let option = {
        backgroundColor: '#fff',
        grid: {
          top: "0",
          left: "0",
          right: "0",
          bottom: "0",
        },
        title: {
          text: '服务费',
          top: 10,
          left: 'center',
          textStyle: {
            fontSize: 16,
            fontWeight: 600
          },
        },
        series: [
          {
            type: "pie",
            color: '#8E99B3',
            silent: true,
            clockwise: true,
            radius: ["0%", "10%"],
            center: ["50%", "50%"],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: [0],
          },
          {
            type: "pie",
            color: '#8E99B3',
            silent: true,
            clockwise: true,
            radius: ["15%", "16%"],
            center: ["50%", "50%"],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: [0],
          },
          {
            stack: "a",
            type: "pie",
            radius: ["30%", "68%"],
            center: ["50%", "50%"],
            silent: true, // 鼠标悬浮效果
            clockwise: true, // 鼠标悬浮效果
            roseType: "area",
            zlevel: 10,
            label: {
              show: true,
              color: '#fff',
              fontSize: 15,
              lineHeight: 20,
              position: 'outside',
              formatter: '{percent|{c}元 -- }\n{percent|{b}}',
              overflow: 'break',
              rich: {
                percent: {
                  fontSize: 15,
                  color: '#8B5CFF',
                },
              }
            },
            itemStyle: {
              borderWidth: 3,
            },
            data: data
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // 搜索
    onSearch() {
      this.getData();
    },
    // 重置
    onReset() {
      this.params.yearMonth = nowDate.getFullYear() + "-" + ((nowDate.getMonth() + 1) < 10 ? '0' + (nowDate.getMonth() + 1) : (nowDate.getMonth() + 1));
      this.getData();
    }
  }
};
</script>

<style lang="less" scoped></style>
